<template>
    <el-dialog
        title="选择客户"
        :visible.sync="dialogVisible"
        width="40%"
    >
        <div>
            <div class="flex-row-center">
                <el-form ref="queryCustomerForm" :model="queryParams" label-width="auto">
                    <el-form-item label="客户名称">
                        <el-input v-model="queryParams.customerName" placeholder="请输入客户名称"></el-input>
                    </el-form-item>
                </el-form>
                <div class="queryView">
                    <el-button type="primary" @click.stop="handleQuery">搜索</el-button>
                    <el-button @click="resetQuery">重置</el-button>
                </div>
            </div>
            <div>
                <el-table
                    v-loading="loading"
                    :data="list"
                    :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border @select="selectItem"
                   >
                    <template slot="empty">
                        <el-empty :image-size="50" description="暂无客户信息"></el-empty>
                    </template>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="80px" fixed="left">
                        <template v-slot="{row}">
                            <e-button size="mini" type="text" @click="chooseCustomer(row)"
                            >选择
                            </e-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="客户名称" align="center" prop="customerName" min-width="120px" show-overflow-tooltip/>
                    <el-table-column label="联系方式" align="center" prop="customerPhone" min-width="120px" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="客户类型" align="center" prop="customerType" min-width="120px" show-overflow-tooltip>
                        <template v-slot="{row}">
                            <dict-tag :options="dict.type.customer_type" :value="row.customerTypeCode"/>
                        </template>
                    </el-table-column>
<!--                    <el-table-column label="客户来源" align="center" prop="customerSource" min-width="120px" show-overflow-tooltip>-->
<!--                        <template v-slot="{row}">-->
<!--                            <dict-tag :options="dict.type.customer_source" :value="row.customerSource"/>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
                </el-table>
                <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                            @pagination="getList"/>
            </div>

        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="confimSelectedCustomer">确 定</el-button>
      </span>
    </el-dialog>
</template>

<script>
import {getCustomerList} from "@/api/memberManage/memberList";

export default {

    components: {},
    dicts:['customer_type','customer_source'],
    props: {
        customerIds:{
            type:Array,
            default:(()=>{
                return []
            })
        }
    },
    data() {
        return {
            loading:false,
            dialogVisible: false,
            queryParams:{
                pageNum:1,
                pageSize:10,
                customerName:''
            },
            total:0,
            list:[],
        }
    },
    computed: {},
    methods: {

        // 确定
        chooseCustomer(row) {
            this.$emit('success', row)
            this.close()
        },
        show() {
            this.dialogVisible = true
            this.getList()
        },
        close() {
            this.dialogVisible = false
        },
        resetQuery(){
            this.$refs.queryCustomerForm.resetFields()
            this.handleQuery()
            // this.$refs.table.clearSelection()
            // this.checkList = []
        },
        handleQuery(){
          this.queryParams.pageNum=1
            this.getList()
        },
        getList(){
            this.loading=true
            getCustomerList(this.queryParams).then(res=>{
                this.list = res.rows;
                this.total=res.total;
            }).finally(()=>{
                this.loading=false
            })
        }

    },
    mounted() {


    },

}
</script>

<style lang="scss" scoped>
.queryView{
    position: relative;
    top: -8px;
    margin-left: 30px;
}
</style>
